﻿@using XRepair.Models

@model List<Brand>

@{
    ViewBag.Title = "Index";
}

@section head
{
    <link type="text/css" href="@Url.Content(@"~\Content\themes\base\jquery-ui.css")" rel="stylesheet" />

    <style type="text/css">
        #brandList
        {
            border-collapse: collapse;
        }

            #brandList td
            {
                border: 1px solid #999;
                vertical-align: top;
            }

        #dlgAddNewBrand td, #dlgEditBrand td
        {
            vertical-align: top;
        }

        .lnkEditBrand
        {
            cursor: pointer;
        }

        #brandList thead tr
        {
            font-weight: bold;
            background: #999;
        }
    </style>
}

<h2>List of brands</h2>

<table id="brandList">
    <thead>
        <tr>
            <td class="hide">[ID]</td>
            <td>[DeviceType]</td>
            <td>[BrandName]</td>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td class="hide">@item.ID</td>
                <td>@item.GenericTypesID</td>
                <td>@item.BrandName</td>
                <td><a class="lnkEditBrand">Edit</a>
                    <br />@Html.ActionLink("Delete", "Delete", new { id = @item.ID })</td>
            </tr>
        }
    </tbody>
</table>

<input type="button" value="Add new" id="btnAddNewBrand" />

<div id="dlgAddNewBrand" class="hide" title="Add new brand">
    @Html.Partial("AddNewPartial", new Brand())
</div>

<div id="dlgEditBrand" class="hide" title="Edit brand">
    @Html.Partial("EditPartial", new Brand())
</div>

@section lazy
{
    <script type="text/javascript" src="@Url.Content(@"~\Scripts\jquery-ui-1.8.20.min.js")"></script>
    <script type="text/javascript" src="@Url.Content(@"~\Scripts\mvcxrepairadmin.js")"></script>

    <script type="text/javascript">
        $(function () {
            $("#dlgAddNewBrand, #dlgEditBrand").dialog({
                autoOpen: false,
                height: 220,
                width: 530,
                modal: false,
                resizable: false
            });

            $("#btnAddNewBrand").click(function () {
                $("#dlgAddNewBrand").dialog("open");
            });

            $("#btnCancelAdd").click(function () {
                $("#dlgAddNewBrand").dialog("close");
            });

            $("#btnCancelEdit").click(function () {
                $("#dlgEditBrand").dialog("close");
            });

            $(".lnkEditBrand").click(function () {
                var contextObj = $(this);
                BindCurrentRowToModel(contextObj);
                $("#dlgEditBrand").dialog("open");
            });

            //$("form").submit(function (e) {
            //    var formData = $(this).serializeArray();
            //    var haltSubmit = false;

            //    for (var i = 0; i < formData.length; i++) {
            //        var arrItem = formData[i];

            //        if (arrItem.value == "") {
            //            $(this).find("#" + arrItem.name).addClass("invalidInput");
            //            haltSubmit = true;
            //        }
            //    }

            //    if (haltSubmit == true) {
            //        return false;
            //    }
            //    else {
            //        $(this).submit();
            //    }
            //});
        });

        function BindCurrentRowToModel(contextObj) {

            var currentRowDataArr = [];
            var currentRow = $(contextObj).closest("tr");

            $('td', currentRow).each(function (i, td) {
                currentRowDataArr.push($(td).html());
            });

            $("#dlgEditBrand #ID").val(currentRowDataArr[0]);
            $("#dlgEditBrand #GenericTypesID option[value='" + currentRowDataArr[1] + "']").attr("selected", "selected");
            $("#dlgEditBrand #BrandName").val(currentRowDataArr[2]);
        }

    </script>
}

